<template>
<div>
  <header class="fix">
    <a href="javascript:history.go(-1);" class="returnBtn"></a>
    猩际出品
    <a  class="shareBtn"></a>
  </header>
  <!--头部 结束-->
  <!--中间 开始-->
  <main >
    <!--轮播图-->
    <div class="carouseContent" style="margin-top: 0.9rem;">
      <div id="carouselMain2">
        <div class="tempWrap">
          <ul class="img">
            <li v-for="(image,index) in bannerImage" :key="index">
              <a ><img :src="image.imgUrl"></a>
            </li>
          </ul>
        </div>
        <div class="carouselBtn">
          <ul>
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="advantage">
      <span><em class="globalIcon"></em>精选全球制造商</span>
      <span><em class="strictIcon"></em>严格控选</span>
      <span><em class="afterSale"></em>无忧售后保障</span>
    </div>
    <div class="recommendation">
      <div class="titleIng">
        <h2>每周精荐</h2>
        <span>RECOMMEND</span>
      </div>
      <div class="listMain">
        <a v-for="product in weekRecommend">
          <em></em>
          <img :src="product.titleImage">
          <h3>{{product.title}}</h3>

        </a>

      </div>
    </div>
    <div class="newGood">
      <div class="titleIng">
        <h2>上新好货</h2>
        <span>NEWARRIVAL</span>
      </div>
      <ul class="newGoodMain">
        <li v-for="pro in newProduct">
          <a  class="newGoodLeft"><img :src="pro.titleImage"></a>
          <div class="newGoodRight">
            <h3>{{pro.title}}</h3>
            <!--<span>零捆绑 释放双手</span>-->
            <a  class="purchaseBtn">立即购买</a>
          </div>
        </li>

      </ul>
    </div>
    <div class="selectedSeries">
      <div class="titleIng">
        <h2>精选系列</h2>
        <span>THE BEST</span>
      </div>
      <div class="seriesMain">
        <div id="top" class="navMain" style="transition-duration: 300ms; transform: translateY(0px);">
          <div class="swiper-container swiper-container-horizontal swiper-container-free-mode swiper-container-ios" id="nav2">
            <div class="swiper-wrapper">
              <div v-for="(product,index) in boutiqueList" :key="index" class="swiper-slide " v-bind:class="{ 'swiper-slide-active': !index}"><span>{{product.name}}</span></div>

              <div class="bar">
                <div class="color" ></div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-container swiper-container-horizontal swiper-container-ios" id="page2">
          <div class="swiper-wrapper">
            <div class="swiper-slide slidepage swiper-slide-active topDistance">
              <div class="describeInfo">
                <h4>精/致/生/活</h4>
                <p>爱自己爱生活</p>
                <p>一纸一水 一妆一刷</p>
                <p>在平凡的生活中能找寻出趣味</p>
                <p>便是生活最好的模样</p>
                <p>猩际出品精挑细选把你日子如诗般填充</p>
                <a  class="moreBtn">更多</a>
              </div>
              <ul class="exhibitionList">
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>

              </ul>
            </div>
            <div class="swiper-slide slidepage swiper-slide-active topDistance">
              <div class="describeInfo">
                <h4>中/国/美/食</h4>
                <p>爱自己爱生活</p>
                <p>一纸一水 一妆一刷</p>
                <p>在平凡的生活中能找寻出趣味</p>
                <p>便是生活最好的模样</p>
                <p>猩际出品精挑细选把你日子如诗般填充</p>
                <a  class="moreBtn">更多</a>
              </div>
              <ul class="exhibitionList">
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
              </ul>
            </div>
            <div class="swiper-slide slidepage swiper-slide-active topDistance">

              <div class="describeInfo">
                <h4>手/工/之/美</h4>
                <p>爱自己爱生活</p>
                <p>一纸一水 一妆一刷</p>
                <p>在平凡的生活中能找寻出趣味</p>
                <p>便是生活最好的模样</p>
                <p>猩际出品精挑细选把你日子如诗般填充</p>
                <a  class="moreBtn">更多</a>
              </div>
              <ul class="exhibitionList">
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
              </ul>
            </div>
            <div class="swiper-slide slidepage swiper-slide-active topDistance">
              <div class="describeInfo">
                <h4>舒/适/生/活</h4>
                <p>爱自己爱生活</p>
                <p>一纸一水 一妆一刷</p>
                <p>在平凡的生活中能找寻出趣味</p>
                <p>便是生活最好的模样</p>
                <p>猩际出品精挑细选把你日子如诗般填充</p>
                <a  class="moreBtn">更多</a>
              </div>
              <ul class="exhibitionList">
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
              </ul>
            </div>
            <div class="swiper-slide slidepage swiper-slide-active topDistance">
              <div class="describeInfo">
                <h4>进/口/滋/补</h4>
                <p>爱自己爱生活</p>
                <p>一纸一水 一妆一刷</p>
                <p>在平凡的生活中能找寻出趣味</p>
                <p>便是生活最好的模样</p>
                <p>猩际出品精挑细选把你日子如诗般填充</p>
                <a  class="moreBtn">更多</a>
              </div>
              <ul class="exhibitionList">
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
              </ul>
            </div>
            <div class="swiper-slide slidepage swiper-slide-active topDistance">
              <div class="describeInfo">
                <h4>健/康/生/活</h4>
                <p>爱自己爱生活</p>
                <p>一纸一水 一妆一刷</p>
                <p>在平凡的生活中能找寻出趣味</p>
                <p>便是生活最好的模样</p>
                <p>猩际出品精挑细选把你日子如诗般填充</p>
                <a  class="moreBtn">更多</a>
              </div>
              <ul class="exhibitionList">
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
                <li>
                  <a >
                    <div class="exhibitPic"><img src="../../images/temporary/commodity8.jpg"></div>
                    <h3>【金晨同款】KOEHL晶彩KO</h3>
                    <div class="priceInfo"><span class="newPri">￥<em>79</em></span><span class="timePri">￥179</span></div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <!--中间 结束-->
</div>
</template>

<script>
  import $ from 'jquery'
  import axios from 'axios'
  import {TouchSlide} from "../../js/plugins/TouchSlide.1.1.min";
  import Swiper from 'swiper'
  import store from '../../service/store'
  export default {
  name: 'xingjiProduce',
  data(){
    return{
      bannerImage:[],//顶部banner
      weekRecommend:[],//每周推荐
      newProduct:[],//新品
      boutiqueList:[],//精品
    }
  },
  components:{
    TouchSlide
  },
  methods:{
    bannerFocusImg() {
    TouchSlide({
      slideCell: "#carouselMain2",
      titCell: ".carouselBtn ul",
      mainCell: ".img",
      effect: "leftLoop",
      autoPlay: true,
      autoPage: true,
      interTime: 3000
    });
  var width = $(window).width();
  var height = parseInt(width / 3 * 2);
  $("#carouselMain li a").css("max-height", height);
},

/*滑动导航切换内容*/
 produceList(){
   let bar;
   let topBar;
   let tSpeed = 300 //切换速度300ms
   let clientWidth;
   let navSum;
   let navSlideWidth;
   let  navWidth;

  //暂时设计每个slide大小需要一致

  var navSwiper2 = new Swiper('#nav2', {
    slidesPerView: 4.5,
    freeMode: true,
    on: {
      init: function() {
        navSlideWidth = this.slides.eq(0).css('width'); //导航字数需要统一,每个导航宽度一致
        bar = this.$el.find('.bar')
        bar.css('width', navSlideWidth)
        bar.transition(tSpeed)
        navSum = this.slides[this.slides.length - 1].offsetLeft //最后一个slide的位置

        clientWidth = parseInt(this.$wrapperEl.css('width')) //Nav的可视宽度
        navWidth = 0
        for (let i = 0; i < this.slides.length; i++) {
          navWidth += parseInt(this.slides.eq(i).css('width'))
        }

        topBar = this.$el.parents('body').find('#top') //页头

      },

    },
  });
  let progress;

  var pageSwiper2 = new Swiper('#page2', {
    watchSlidesProgress: true,
    resistanceRatio: 0,
    on: {
      touchMove: function() {
        progress = this.progress
        bar.transition(0)
        bar.transform('translateX(' + navSum * progress + 'px)')
        //粉色255,72,145灰色51,51,51
        for (let i = 0; i < this.slides.length; i++) {
         let  slideProgress = this.slides[i].progress
          if (Math.abs(slideProgress) < 1) {
            let r = Math.floor((102 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51)
            let g = Math.floor((102 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51)
            let b = Math.floor((102 - 51) * (1 - Math.pow(Math.abs(slideProgress), 2)) + 51)
            navSwiper2.slides.eq(i).find('span').css('color', 'rgba(' + r + ',' + g + ',' + b + ',1)')
          }
        }
      },
      transitionStart: function() {
        let activeIndex = this.activeIndex
        let activeSlidePosition = navSwiper2.slides[activeIndex].offsetLeft
        //释放时导航粉色条移动过渡
        bar.transition(tSpeed)
        bar.transform('translateX(' + activeSlidePosition + 'px)')
        //释放时文字变色过渡
        navSwiper2.slides.eq(activeIndex).find('span').transition(tSpeed)
        navSwiper2.slides.eq(activeIndex).find('span').css('color', 'rgba(102,102,102,1)')
        if (activeIndex > 0) {
          navSwiper2.slides.eq(activeIndex - 1).find('span').transition(tSpeed)
          navSwiper2.slides.eq(activeIndex - 1).find('span').css('color', 'rgba(102,102,102,1)')
        }
        if (activeIndex < this.slides.length) {
          navSwiper2.slides.eq(activeIndex + 1).find('span').transition(tSpeed)
          navSwiper2.slides.eq(activeIndex + 1).find('span').css('color', 'rgba(102,102,102,1)')
        }
        //导航居中
       let  navActiveSlideLeft = navSwiper2.slides[activeIndex].offsetLeft //activeSlide距左边的距离

        navSwiper2.setTransition(tSpeed)
        if (navActiveSlideLeft < (clientWidth - parseInt(navSlideWidth)) / 2) {
          navSwiper2.setTranslate(0)
        } else if (navActiveSlideLeft > navWidth - (parseInt(navSlideWidth) + clientWidth) / 2) {
          navSwiper2.setTranslate(clientWidth - navWidth)
        } else {
          navSwiper2.setTranslate((clientWidth - parseInt(navSlideWidth)) / 2 - navActiveSlideLeft)
        }

      },
    }
  });

  navSwiper2.$el.on('touchstart', function(e) {
    e.preventDefault() //去掉按压阴影
  })
  navSwiper2.on('tap', function(e) {

    let clickIndex = this.clickedIndex
    let clickSlide = this.slides.eq(clickIndex)
    pageSwiper2.slideTo(clickIndex, 0);
    this.slides.find('span').css('color', 'rgba(102,102,102,1)');
    clickSlide.find('span').css('color', 'rgba(102,102,102,1)');
  })
}

},
    destroyed(){
      $(window).unbind()
    },
  mounted(){
    let _this=this;


    axios.post(store.getAddress()+'/api/wxapp/fromXj/listBanner').then(function (response) {
      if(response.data.code==200){
        _this.bannerImage=response.data.list;
        _this.$nextTick(function (){
          _this.bannerFocusImg()
        })

      }else{
        console.log("程序查询出错")
      }
    }).catch(function (error) {
      console.log(error)
    })
    axios.post(store.getAddress()+'/api/wxapp/fromXj/listWeekRecommend').then(function (response) {
      if(response.data.code=200){
        _this.weekRecommend=response.data.list;
      }else{
        console.log("每周推荐查询出错")
      }
    }).catch(function (error) {
      console.log(error)
    })
    axios.post(store.getAddress()+'/api/wxapp/fromXj/listNew').then(function (response) {
    if(response.data.code==200){
      _this.newProduct=response.data.list;
    }else{
      console.log("新品出错")
    }


    }).catch(function (error) {
      console.log(error)
    })
    axios.post(store.getAddress()+'/api/wxapp/fromXj/listSupreme').then(function (response) {

      if(response.data.code==200){
        _this.boutiqueList=response.data.list;
        _this.$nextTick(function () {
          _this.produceList();
        })
      }else{
        console.log("分类查询出错")
      }

    }).catch(function (error) {
      console.log(error)
    })






    $(window).scroll(function(){
      var $scrolltop=document.documentElement.scrollTop||document.body.scrollTop;
      var $tabScroll=$("#top").offset().top-600;
      if($scrolltop>=$tabScroll){
        $("#top").addClass("fix")
        if($tabScroll<0){
          $("#top").removeClass("fix")
        }
      }
    })
  }
}
</script>
<style scoped>
  @import "../../css/common/common.css";
  @import "../../css/other/secondLevel.css";
  @import "../../css/plugins/swiper.min.css";
</style>

